<!-- src/views/CategoryDetailView.vue -->
<template>
  <div class="category-detail-container" v-loading="loading">
    <el-page-header @back="$router.go(-1)" :content="category.name || '加载中...'" style="margin-bottom: 20px;" />

    <el-alert
      v-if="errorMessage"
      :title="errorMessage"
      type="error"
      show-icon
      closable
      style="margin-bottom: 20px;"
    />

    <div v-if="category.id" class="category-info">
      <div class="category-header">
        <div class="category-icon">
          <el-avatar
            v-if="category.iconUrl"
            :src="category.iconUrl"
            shape="square"
            :size="64"
          />
          <el-avatar v-else shape="square" :size="64" style="background-color: #409EFF;">
            {{ category.name.charAt(0).toUpperCase() }}
          </el-avatar>
        </div>
        <div class="category-details">
          <h1>{{ category.name }}</h1>
          <p v-if="category.description">{{ category.description }}</p>
          <div class="category-stats">
            <span>帖子数: {{ category.postCount || 0 }}</span>
            <span>今日: {{ category.todayPostCount || 0 }}</span>
          </div>
        </div>
      </div>

      <!-- 帖子列表区域 -->
      <div class="posts-section">
        <h2>帖子列表</h2>
        <!-- 使用 PostListView 组件展示帖子列表 -->
        <!-- 传递 categoryId 作为 prop -->
        <PostListView :category-id="Number(categoryId)" />
      </div>
    </div>

    <div v-else-if="!loading" class="category-not-found">
      <p>板块未找到。</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import { getCategoryById } from '@/services/categoryService';
import { ElMessage } from 'element-plus';
import PostListView from '@/views/PostListView.vue'; // 引入帖子列表组件

const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();

const loading = ref(false);
const errorMessage = ref('');
const category = ref({
  id: null,
  name: '',
  description: '',
  iconUrl: '',
  sortOrder: 0,
  postCount: 0,
  todayPostCount: 0
});

const categoryId = computed(() => route.params.id);

// 获取板块详情
const fetchCategoryDetail = async () => {
  if (!categoryId.value) return;
  loading.value = true;
  errorMessage.value = '';
  try {
    const response = await getCategoryById(categoryId.value);
    category.value = response.data;
  } catch (error) {
    console.error('Failed to fetch category detail:', error);
    errorMessage.value = error.response?.data?.message || '获取板块详情失败';
    ElMessage.error(errorMessage.value);
    if (error.response?.status === 404) {
      router.push('/404'); // 或者显示 404 页面
    }
  } finally {
    loading.value = false;
  }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchCategoryDetail();
});

// 监听路由参数变化 (如果从一个板块详情页导航到另一个)
watch(categoryId, (newId, oldId) => {
  if (newId && newId !== oldId) {
    fetchCategoryDetail();
  }
});
</script>

<style scoped>
.category-detail-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.category-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.category-icon {
  margin-right: 20px;
}

.category-details h1 {
  margin: 0 0 10px 0;
  font-size: 2em;
  font-weight: bold;
  color: #333;
}

.category-details p {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 1em;
  line-height: 1.5;
}

.category-stats {
  display: flex;
  gap: 20px;
  font-size: 0.9em;
  color: #999;
}

.posts-section {
  margin-top: 20px;
}

.posts-section h2 {
  margin-bottom: 15px;
  color: #333;
}

.category-not-found {
  text-align: center;
  color: #999;
  font-size: 1.2em;
  margin-top: 50px;
}
</style>
